<template>
  <page-model :title="pageName">
      <div class="mainBox">
        <header>
          <div class="uploadData" @click="uploadDocList">上传</div>
        </header>
        <table class="mainTable" border="0" cellspacing="0" cellpadding="0">
          <thead>
            <th>序号</th>
            <th>版本名</th>
            <th>版本号</th>
            <th>版本描述</th>
            <th>客户端文件</th>
            <th>上传时间</th>
            <th>操作</th>
          </thead>
          <tbody v-if="this.$store.state.appClient.total">
            <tr v-for="(item, index) in this.$store.state.appClient.tableData" :key="item.learnId">
              <td>{{index>= 9 ? index+1 : '0'+ (index + 1)}}</td>
              <td>{{ item.versionName }}</td>
              <td>{{ item.versionCode }}</td>
              <td>{{ item.versionDesc }}</td>
              <td>{{ item.versionUrl }}</td>
              <td>{{ item.createTime }}</td>
              <td>
                <span @click="writeDoc(item)">编辑</span>
                <span @click="deleteDoc(item)">删除</span>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="block" v-if="this.$store.state.appClient.total">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="this.$store.state.appClient.total"
          ></el-pagination>
        </div>
        <!-- 当表头为空时 -->
        <div class="empty" v-if="!this.$store.state.appClient.total">
          <img src="@/assets/scene/empty.png" alt class="emptyLogo" />
          <span>空空如也</span>
        </div>
      </div>
    <delete-alert-box
      v-if="isDelete"
      :isDelete="isDelete"
      :descTips="descTips"
      @Confirm="Confirm"
      @Cancel="Cancel"
    ></delete-alert-box>
  </page-model>
</template>
<script>
// import { uploadData } from '@/api/documentModule'
import moment from 'moment'
// console.log(require)
export default {
  data () {
    return {
      pageName: 'APP客户端管理',
      // 当前页
      currentPage: +'',
      // 分页
      total: +'',
      index: 1,
      pageSize: 10,
      // 选择类目
      documentName: '',
      descTips: [],
      isDelete: false,
      versionId: ''
    }
  },
  components: {},
  filters: {
    dateFormat: function (dateStr) {
      return moment(dateStr).format('YYYY-MM-DD HH:mm')
    }
  },
  methods: {
    handleCurrentChange (val) {
      // console.log(val)
      this.index = val
      this.getDataList()
    },
    // 展示列表
    getDataList () {
      const params = {
        index: this.index,
        pageSize: this.pageSize
      }
      this.$store.dispatch('appClient/updateTable', params)
    },
    // 编辑文档
    writeDoc (item) {
      sessionStorage.setItem('versionId', item.versionId)
      this.$router.push('/addClient')
      // this.editInfo = item
      // this.$store.state.ifShowCover = true
      // this.$store.state.showEditBox = true
    },
    // 删除文档
    deleteDoc (item) {
      this.isDelete = true
      this.versionId = Number(item.versionId)
      this.descTips = [
        {
          tips: `确定删除"${item.versionName}"的相关信息？`,
          default: ''
        }
      ]
    },
    Confirm () {
      this.$store.dispatch('appClient/deleteClientData', this.versionId).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          this.isDelete = false
          this.getDataList()
        }
      })
    },
    Cancel () {
      this.isDelete = false
    },
    // 查询相关文档
    selectDocument () {
      this.getDataList()
    },
    // 控制更新盒子隐藏
    uploadDocList () {
      window.sessionStorage.removeItem('versionId')
      this.$router.push('/addClient')
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/clickBox.scss";
@import "@/styles/dataModule.scss";
    .mainBox{
    min-height: calc(100% - 90px)
  }
  .selectionBox .Correlation .el-select {
    left: 186px;
  }
  .selectionBox .documentName {
    left: 30px;
  }
  .selectionBox .el-input {
    left: 100px;
  }
  .selectionBox .selectDocument {
    left: 380px;
  }
  .selectionBox .reset {
    left: 480px;
  }
</style>
